<template>
	<view class="container">

		<view class="container_one">
			<view class="list-cell b-b imga" @click="chooseImage" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">头像</text>
				<view class="cell-more more_img">
					<image class="cell-img" :src="avatar || '../../static/img/me/center_header.png'"></image>
					<text class="yticon icon-you"></text>
				</view>
			</view>
			
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50" @click="confirmDialog">
				<text class="cell-tit">昵称</text>
				<view class="cell-more">
					<text class="cell-tit more-tit">{{nickname || username}}</text>
					<text class="yticon icon-you"></text>
				</view>
			</view>
			
			<view class="list-cell b-b" hover-class="cell-hover" :hover-stay-time="50" @click="toggle">
				<text class="cell-tit">密码</text>
				<view class="cell-more">
					<text class="cell-tit more-tit">{{password !="" && password ? "已设置" : "未设置"}}</text>
					<text class="yticon icon-you"></text>
				</view>
			</view>
		</view>
		
		<view class="container_one">
			<view class="list-cell b-b" @click="navTo('/pages/address/address')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">管理收货地址</text>
				<view class="cell-more">
					<text class="yticon icon-you"></text>
				</view>
			</view>
			<view class="list-cell b-b" @click="navTo('/pages/realName/bankCard')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">绑定银行卡</text>
				<view class="cell-more">
					<text class="cell-tit more-tit">{{bankId != undefined && bankId != null && bankId != "" ? "已绑定" : "未绑定"}}</text>
					<text class="yticon icon-you"></text>
				</view>
			</view>
			<view class="list-cell m-t b-b" hover-class="cell-hover" :hover-stay-time="50">
				<a href="tel:4001661880" style="text-decoration: unset; display: block; width: 100%; display: flex;">
					<text class="cell-tit">联系客服</text>
					<view class="cell-more">
						<text class="cell-tit more-tit">4001661880</text>
						<text class="yticon icon-you"></text>
					</view>
				</a>
			</view>
			
			<view class="list-cell b-b" @click="navTo('/pages/user/aboutus')" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">关于我们</text>
			</view>
		</view>
		
		
		
		<!-- <view class="list-cell b-b" @click="navTo('/pages/public/complete')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">我的分享人</text>
			<view class="cell-more">
				<text class="cell-tit more-tit">{{pid !="" ? userInfo.invitees : "未绑定"}}</text>
				<text class="yticon icon-you"></text>
			</view>
		</view> -->
		
		
		
		<!-- <view class="list-cell b-b" @click="navTo('/pages/realName/realName')" hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">实名认证</text>
			<view class="cell-more">
				<text class="cell-tit more-tit">{{gender != 0 ? "已认证" : "未认证"}}</text>
				<text class="yticon icon-you"></text>
			</view>
		</view> -->
		
		
		<view class="list-cell log-out-btn" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view>

		<!-- 修改昵称 -->		
		<uni-popup ref="popupName" type="center" :animation="true" @change="change">
			<view class="popupOne">
				<view class="popupName">修改昵称</view>
				
				<view class="popupinput">
					<input class="uni-input" cursor-spacing="10" maxlength="11" type="text" v-model="nickname" focus>
				</view>
				
				<view class="popupbutton">
					<view class="close" @click="closeInput">取消</view>
					<view class="set" @click="dialogInputConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 设置密码 -->
		<uni-popup ref="popupPassword" type="center" :animation="true" @change="change">
			<view class="popupBack">
				<view class="popupTit">您还没设置密码</view>
				
				<view class="popupmain">密码可用于登录、提现等，为了保证您的账户安全，请设置密码</view>
				
				<view class="popupbutton">
					<view class="close" @click="close">取消</view>
					<view class="set" @click="setPassWord">设置密码</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'

	export default {
		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		
		data() {
			return {
				userInfo: "",
				avatar: "",         //头像
				value: '',
				imageData: [],
				nickname: "",		//昵称
				username:"",		//修改昵称
				defaultName:"",		//默认名称
				password:"",		//密码
				pid:"",				//绑定邀请码
				gender:"",			//实名认证
				bankId:"",			//绑定银行卡
				popupPassword: false,		//设置密码弹窗
			};
		},
		
		onLoad() {
			let _this = this;
			_this.tui.request('/app/user/getUserInfo', 'GET', {}, false, false, false, )
				.then(res => {
					_this.userInfo = res.data.userInfo;
					_this.nickname = _this.userInfo.nickname;
					_this.username = _this.userInfo.username;
					_this.avatar = _this.userInfo.avatar;
					_this.password = _this.userInfo.password;
					_this.pid = _this.userInfo.pid;
					_this.gender = _this.userInfo.gender;
					_this.bankId = _this.userInfo.bankId;
					_this.defaultName = _this.userInfo.username;
					
					
					if(_this.password !="" && _this.password){
						
					}else{
						_this.$refs.popupPassword.open()
					}
					
				}).catch(err => {
					console.log(err)
				})
				
		},
		
		methods: {
			...mapMutations(['logout', 'login']),
			// 上传图片
			chooseImage() {
				let _this = this;
				uni.chooseImage({ 							
					count: 1, 								//默认选择1张图片
					sizeType: ['original', 'compressed'],   //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						console.log(res.tempFilePaths[0]);  //成功则返回图片的本地文件路径列表 tempFilePaths
						
						
						uni.showLoading({
						    title: '加载中',
							mask:true
						});
						
						
						uni.uploadFile({ 					//将本地资源上传到开发者服务器
							url: _this.tui.interfaceUrl() + '/app/user/uploadAvatar', //接口地址
							filePath: res.tempFilePaths[0], //图片地址
							name: 'file',
							header: {
								'qianyantoken': uni.getStorageSync('token')
							},
							formData: {
								'file': res.tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								
								uni.hideLoading();
								
								_this.tui.request('/app/user/getUserInfo/', 'GET', {}, false, false, false, )
									.then(res => {
										_this.userInfo = res.data.userInfo;
										_this.nickname = _this.userInfo.nickname;
										_this.avatar = _this.userInfo.avatar;
										_this.username = _this.userInfo.username;
										_this.defaultName = _this.userInfo.username;
									}).catch(err => {
										console.log(err)
									})
							}
						});
					}
				});
			},

			// 修改昵称
			confirmDialog() {
				this.$refs.popupName.open()			
			},
			
			//修改昵称的取消弹窗按钮
			closeInput(){
				this.$refs.popupName.close()
			},
			
			// 修改昵称的确认弹窗按钮
			dialogInputConfirm() {
				if(this.nickname == ""){
					this.tui.toast("昵称不能为空")
				}else{
					this.tui.request('/app/user/changeUserInfo', 'POST', {
							nickname: this.nickname,
						},
						false,
						false,
						false,
					).then(res => {
						console.log(res);
						if(res.errno == 0){
							this.nickname = this.nickname;
							this.$refs.popupName.close()
						}else{
							this.tui.toast("修改失败");
							this.$refs.popupName.close()
						}
					})
				}
			},
			
			// 设置密码
			toggle() {
				if(this.password !="" && this.password){
					uni.navigateTo({
						url:`/pages/realName/setPassWord?state=1`
					})
				}else{
					this.$refs.popupPassword.open()
				}
			},
			
			// 设置密码取消
			close(){
				this.$refs.popupPassword.close()
			},
			
			// 跳转设置密码页面
			setPassWord(){
				uni.navigateTo({
					url:"/pages/realName/setPassWord?state=0"
				})
			},
			
			// 修改昵称弹出层取消
			change() {
				this.name = "";
			},
			
			// 修改密码弹出层取消
			setchange(){
				this.setShow = false;
			},

			// 跳转对应的页面
			navTo(url) {
				if(this.password !="" && this.password){
					uni.navigateTo({
						url
					})
				}else{
					this.$refs.popupPassword.open()
				}
			},

			//退出登录
			toLogout() {
				uni.showModal({
					content: '确定要退出登录么',
					success: (e) => {
						if (e.confirm) {
							this.logout();
							uni.removeStorageSync("token");
							// 跳转到tabBar页面并刷新tabBar页面
							uni.reLaunch({
								url:"/pages/user/user"
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;

	}

	.container {
		position: relative;
	}
	
	.container_one{
		width: 95%;
		margin: 20upx auto 20upx auto;
		border-radius: 5px;
	}
	
	

	.chaeckName {
		color: #999999;
		font-size: 12px;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
	}

	.inputName {
		width: 80%;
		margin-left: 20px;
		background: #fff;
		padding-top: 5px;
		padding-bottom: 5px;
		border-radius: 10px;
		border: 1px solid #e6e6e6;
		text-indent: 10px;
	}

	.button {
		display: flex;
		color: #323232;
		font-size: 14px;
		padding-top: 35px;

		.closeBut {
			width: 50%;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
			border-top: 1px solid #DCDCDC;
			border-right: 1px solid #DCDCDC;
		}

		.resetBut {
			width: 50%;
			text-align: center;
			padding-top: 10px;
			padding-bottom: 10px;
			border-top: 1px solid #DCDCDC;
		}

		.resCol {
			color: #6E609E;
		}

	}

	.list-cell {
		display: flex;
		align-items: baseline;
		padding: 20upx $page-row-spacing;
		line-height: 60upx;
		position: relative;
		background: #fff;
		justify-content: center;

		&.log-out-btn {
			width: 90%;
			margin: 40upx auto 0 auto;
			background: #D14798;
			border-radius: 50px;
			/* opacity: .7; */

			.cell-tit {
				color: #FFFFFF;
				text-align: center;
				margin-right: 0;
			}
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		&.imga {
			align-items: center;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: #323232;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;
		}

		.more_img {
			display: flex;
			align-items: center;
		}

		.cell-img {
			width: 150upx;
			height: 150upx;
			margin-right: 10upx;
			border-radius: 50%;
		}

		.more-tit {
			color: #666666;
			font-size: 16px;
		}

		switch {
			transform: translateX(16upx) scale(.84);
		}
	}

	/* 设置密码 */
	.popupBack{
		width:68%;
		background:rgba(248,248,248,1);
		border-radius:20upx;
		margin: 0 auto;
		
		
		.popupTit{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
			text-align: center;
			padding: 30upx;
		}
		
		.popupmain{
			width: 85%;
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:42upx;
			text-align: center;
			margin: 0 auto;
		}
		
		.popupbutton{
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 70upx;
			border-top: 1px solid #DCDCDC;
		}
		
		.close{
			width: 50%;
			text-align: center;
			border-right: 1px solid #dcdcdc;
			padding: 23upx;
			font-size:28upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(50,50,50,1);
		}
		.set{
			width: 50%;
			text-align: center;
			font-size:28upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(110,96,158,1);
		}
	}
	
	/* 修改昵称 */
	.popupOne{
		width: 492upx;
		background:rgba(248,248,248,1);
		border-radius:20upx;
		
		
		
		.popupName{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			padding-top: 30upx;
			padding-left: 30upx;
		}
		
		.popupinput{
			width: 80%;
			margin-left: 30upx;
			margin-top: 30upx;
			background:rgba(255,255,255,1);
			border:1px solid rgba(230, 230, 230, 1);
			border-radius:10upx;
			
			input{
				text-indent: 24upx;
				line-height: 35px;
				height: 35px;
			}
		}
		
		.popupbutton{
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 70upx;
			border-top: 1px solid #DCDCDC;
		}
		
		.close{
			width: 50%;
			text-align: center;
			border-right: 1px solid #dcdcdc;
			padding: 23upx;
			font-size:28upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(50,50,50,1);
		}
		.set{
			width: 50%;
			text-align: center;
			font-size:28upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(110,96,158,1);
		}
		
		
		
		
	}
	
	
	
</style>
